<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>layui-demo</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.css" />
<script src="./js/jquery-2.0.3.js"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div id="editFormDiv" style="display: none">
			<form class="layui-form" action="" lay-filter="example">

				<table class="layui-table" style="left: 50px;">

					<tr>
						<td colspan="2">
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">申请单号：</label>
								<div class="layui-input-inline">
									<input type="text" name="flowid" id="flowid" autocomplete="off"
										readonly="readonly" class="layui-input" style="width: 500px;">
								</div>
							</div>
						</td>
					</tr>

					<tr>
						<td>
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">申请人工号：</label>
								<div class="layui-input-inline">
									<input type="text" autocomplete="off" readonly="readonly"
										name="applyno" id="applyno" class="layui-input">
								</div>
							</div>
						</td>
						<td>
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">申请人部门：</label>
								<div class="layui-input-inline">
									<input type="text" autocomplete="off" readonly="readonly"
										name="applydeptname" id="applydeptname" class="layui-input">
								</div>
							</div>
						</td>
					</tr>

					<tr>
						<td colspan="2">
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">申请人邮箱：</label>
								<div class="layui-input-inline">
									<input type="text" autocomplete="off" name="applyemail"
										id="applyemail" readonly="readonly" class="layui-input"
										style="width: 500px;">
								</div>
							</div>
						</td>
					</tr>
				</table>


				<table class="layui-table">

					<tr>
						<td>
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">物料编码：</label>
								<div class="layui-input-inline">
									<input type="text" autocomplete="off" name="materialno"
										readonly="readonly" id="materialno" class="layui-input">
								</div>


							</div>
						</td>
						<td>
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">物料名称：</label>
								<div class="layui-input-inline">
									<input type="text" autocomplete="off" readonly="readonly"
										name="materialname" id="materialname" class="layui-input">
								</div>


							</div>
						</td>

					</tr>


					<tr>
						<td>
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">物料单价：</label>
								<div class="layui-input-inline">
									<input type="text" autocomplete="off" readonly="readonly"
										name="materialprice" id="materialprice" class="layui-input">
								</div>
							</div>
						</td>
						<td>
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">库存：</label>
								<div class="layui-input-inline">
									<input type="text" autocomplete="off" readonly="readonly"
										name="materialnum" id="materialnum" class="layui-input">
								</div>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">申请数量：</label>
								<div class="layui-input-inline">
									<input type="number" autocomplete="off" min="1" id="applynum"
										name="applynum" readonly="readonly" class="layui-input">
								</div>
							</div>
						</td>
						<td>
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">总金额：</label>
								<div class="layui-input-inline">
									<input type="number" name="totalmoney" id="totalmoney"
										autocomplete="off" readonly="readonly" class="layui-input">
								</div>
							</div>
						</td>
					</tr>
				</table>

				<table class="layui-table">
					<tr>
						<td colspan="2">

							<div class="layui-inline">
								<label class="layui-form-label" style="width: 120px">下环节处理人：</label>
								<div class="layui-input-inline">
									<input type="text" autocomplete="off" name="deliveryno"
										id="deliveryno" readonly="readonly" class="layui-input">
									<input type="hidden" autocomplete="off" name="appno" id="appno"
										readonly="readonly" class="layui-input">
								</div>
							</div>
						</td>
					</tr>
				</table>

				<table class="layui-table">
					<tr>
						<td colspan="2">
							<div class="layui-form-item">
								<label class="layui-form-label">备注</label>
								<div class="layui-input-block">
									<textarea placeholder="请输入内容" class="layui-textarea"
										name="appresult" id="appresult" style="height: 20px;"
										readonly="readonly"></textarea>
								</div>
							</div>
						</td>
					</tr>

				</table>

			</form>
		</div>

		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div style="padding: 15px;">
				<div class="demoTable">
					<form action="">
						申请编号:
						<div class="layui-inline">
							<input class="layui-input" name="flowid" id="demoReload"
								autocomplete="on">
						</div>
						处理意见：
						<div class="layui-inline">
							<input class="layui-input" name="appresult" id="demoReload2"
								autocomplete="on">
						</div>
						申请人：
						<div class="layui-inline">
							<input class="layui-input" name="applyno" id="demoReload3"
								autocomplete="on">
						</div>
						时间：
						<div class="layui-inline">
							<input class="layui-input" type="text" name="starttime"
								id="starttime" autocomplete="off">
						</div>
						~
						<div class="layui-inline">
							<input class="layui-input" type="text" name="endtime"
								id="endtime" autocomplete="off">
						</div>
						<button type="button" class="layui-btn" data-type="reload">搜索</button>
						<button type="reset" lay-filter="formDemoreset" class="layui-btn"
							id="reset">重置</button>
				</div>
				</form>
				<table class="layui-hide" id="test" lay-filter="test"></table>
			</div>
		</div>


	</div>


	<script type="text/html" id="toolbarDemo">
  
</script>

	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">查看详情</a>
	</script>


	<script src="./layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

	<script>
		layui.use('table', function() {
			var table = layui.table;

			table.render({
				elem : '#test',//显示位置
				url : 'getwarbypage',//地址和springmvc中控制器地址一致
				toolbar : '#toolbarDemo',
				title : '06环节处理数据表',
				cols : [ [ {
					type : 'checkbox',
					fixed : 'left'
				}, {
					field : 'id',
					title : 'ID',
					width : 80,
					fixed : 'left',
					unresize : true,
					sort : true
				}, {
					field : 'flowid',
					title : '流程编号',
					width : 200
				}, {
					field : 'applyno',
					title : '申请人',
					width : 130
				}, {
					field : 'appno',
					title : '处理人',
					width : 130
				}, {
					field : 'appresult',
					title : '备注',
					width : 250,
					edit : 'text',
					sort : true
				}, {
					field : 'appstatus',
					title : '是否处理',
					width : 130,
					templet : function(res) {
						return res.appstatus == 1 ? "待处理" : "已处理";
					}
				}, {
					field : 'approvetime',
					title : '处理时间',
					width : 200
				}, {
					fixed : 'right',
					title : '操作',
					toolbar : '#barDemo',
					width : 250
				} ] ],
				page : true,
				id : 'testReload',
				//根据当前登录的用户显示对应的未处理业务
				where : {
					appno : "${empno}"
				}
			});

			//头工具栏事件
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
				case 'getCheckData':
					var data = checkStatus.data;
					layer.alert(JSON.stringify(data));
					break;
				case 'getCheckLength':
					var data = checkStatus.data;
					layer.msg('选中了：' + data.length + ' 个');
					break;
				case 'isAll':
					layer.msg(checkStatus.isAll ? '全选' : '未全选');
					break;
				case 'addBlog':

					layer.open({
						type : 1//弹出层 div
						,
						area : [ '400px', '300px' ],
						shade : 0.6,
						id : 'LAY_layuipro01' //设定一个id，防止重复弹出
						,

						content : $("#addDiv"), //后面不用.html()

					});

				}
				;
			});

			//监听行工具事件
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				//console.log(obj)
				if (obj.event === 'del') {
					layer.confirm('真的删除行么', function(index) {

						//console.log(data); //得到的是当前行对应的数据信息
						console.log("userId :" + data.userId);
						$.ajax({
							type : "DELETE", //提交方式
							url : "users/" + data.userId, //地址和springmvc中控制器地址一致
							success : function(cm) {
								layer.msg(cm.msg, {
									time : 2000
								//两秒延迟
								}, function() {
									if (cm.msg == "删除成功") {

										//obj.update(); ?? 理想
										//layer.close(index);;
										parent.layer.closeAll();//关闭所有,简单粗暴
										window.parent.location.reload();//刷新父页面
									}

								});

							}
						});

					});
				} else if (obj.event === 'edit') {

					//先给我们的表单元素赋值
					$("#id").attr("value", data.id);
					console.log(data.id);
					$("#flowid").attr("value", data.flowid);
					console.log(flowid + data.flowid);
					$("#applyno").attr("value", data.applyno);
					$("#deliveryno").attr("value", data.applyno);
					$("#appno").attr("value", data.appno);
					//等级

					layer.open({
						type : 1//弹出层 div
						,
						area : [ '600px', '530px' ],
						shade : 0.6,
						id : 'LAY_layuipro' //设定一个id，防止重复弹出
						,
						//content : $("#editFormDiv").html(),
						content : $("#editFormDiv"), //后面不用.html()

					});

					//将流程编号传到控制器获取申请的数据
					$.ajax({
						url : "selectbyflowid",
						type : "GET",
						data : {
							flowid : data.flowid
						},
						dataType : "json",
						success : function(apply01) {
							//赋值给对应的文本框
							$("#flowid").val(apply01.flowid);
							$("#applyno").val(apply01.applyno);
							$("#materialname").val(apply01.materialname);
							$("#materialnum").val(apply01.materialnum);
							$("#applyreason").val(apply01.applyreason);
							$("#applydeptname").val(apply01.applydeptname);
							$("#applyemail").val(apply01.applyemail);
							$("#materialno").val(apply01.materialno);
							$("#materialprice").val(apply01.materialprice);
							$("#applynum").val(apply01.applynum);
							$("#totalmoney").val(apply01.totalmoney);
							$("#flowidhidden").val(apply01.flowid);
							$("#applynohidden").val(apply01.applyno);
							$("#02handlder").val(apply01.nexthandler);
							var total = apply01.totalmoney;
							//申请数量减去库存，负值表示够，正值表示不够
							var kucun = apply01.applynum - apply01.materialnum;

							console.log("申请总金额：" + total);
							console.log("库存是否足够：" + kucun);

						}
					});

					//表单的render
					layui.form.render();

					/* layer.prompt({
						formType : 2,
						//value : data.userName //.email
						value : JSON.stringify(data)
					}, function(value, index) {
						obj.update({
							email : value
						});
						layer.close(index);
					}); */
				}
			});

			/*表格数据重载 模糊检索*/
			var $ = layui.$, active = {

				reload : function() {
					var demoReload = $('#demoReload');
					var demoReload2 = $('#demoReload2');
					var demoReload3 = $('#demoReload3');
					var starttime = $('#starttime');
					var endtime = $('#endtime');

					var begin = $('#starttime').val();
					var end = $('#endtime').val();

					if (begin > end) {
						layer.msg("结束时间不能小于开始时间");
						$('#searchdateend').val($('#searchdatebegin').val());
						return false;
					}
					//执行重载
					table.reload('testReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : { //检索的条件
							flowid : demoReload.val(),
							appresult : demoReload2.val(),
							applyno : demoReload3.val(),
							starttime : starttime.val(),
							endtime : endtime.val()
						}
					});
				}
			};

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			/*修改 表单的提交 按钮的单击事件 ，监听1 */
			$(document).on("click", ".btn-update", function() {
				//可以实现 比较麻烦....
				//console.log(layui.form.data);
			});

			//监听提交  新增加的代码  监听2
			layui.form.on('submit(demo1)', function(data) {
				/* layer.alert(JSON.stringify(data.field), {
					title : '最终的提交信息'
				}) */
				//表单中的数据 进行转换，得到一个json格式的字符串
				//console.log(JSON.stringify(data.field));
				//ajax请求实现访问控制器
				console.log($("#flowid").val());
				$.ajax({
					//表单提交，存储appresult，(由后台完成)修改approvetime和deliverystatus

					type : "post", //提交方式
					url : "waranddel", ////地址和springmvc中控制器地址一致
					data : {
						flowid : $("#flowid").val(),
						appno : $("#appno").val(),
						applyno : $("#applyno").val(),
						appresult : $("#appresult").val(),
						deliveryno : $("#deliveryno").val()
					},//提交给控制器的数据
					//contentType : "application/json", //提交给控制的数据 格式
					success : function(flag) {
						layer.msg(flag == true ? "入库成功！" : "入库失败！", {
							time : 2000
						//两秒延迟
						}, function() {
							if (flag == true) {
								//obj.update(); ?? 理想
								//layer.close(index);;
								parent.layer.closeAll();//关闭所有,简单粗暴
								window.location.reload();//刷新页面
							}
						});

					}

				});

				return false;
			});

		});
	</script>


	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

	<script>
		//JavaScript代码区域
		layui.use('element', function() {
			var element = layui.element;

		});
		var isShow = true; //定义一个标志位
		$('.kit-side-fold').click(function() {
			//选择出所有的span，并判断是不是hidden
			$('.layui-nav-item span').each(function() {
				if ($(this).is(':hidden')) {
					$(this).show();
				} else {
					$(this).hide();
				}
			});
			//判断isshow的状态
			if (isShow) {
				$('.layui-side.layui-bg-black').width(60); //设置宽度
				$('.kit-side-fold i').css('margin-right', '70%'); //修改图标的位置
				//将footer和body的宽度修改
				$('.layui-body').css('left', 60 + 'px');
				$('.layui-footer').css('left', 60 + 'px');
				//将二级导航栏隐藏
				$('dd span').each(function() {
					$(this).hide();
				});
				//修改标志位
				isShow = false;
			} else {
				$('.layui-side.layui-bg-black').width(200);
				$('.kit-side-fold i').css('margin-right', '10%');
				$('.layui-body').css('left', 200 + 'px');
				$('.layui-footer').css('left', 200 + 'px');
				$('dd span').each(function() {
					$(this).show();
				});
				isShow = true;
			}
		});
		layui.use('laydate', function() {
			var laydate = layui.laydate;

			// 时间选择器初始化 开始时间
			laydate.render({
				elem : '#starttime',
				theme : '#1e9fff',
				done : function(value, date, endDate) {
					var startDate = new Date(value).getTime();
					var endTime = new Date($('#endtime').val()).getTime();
					if (endTime < startDate) {
						layer.msg('结束时间不能小于开始时间');
						$('#starttime').val($('#endtime').val());
					}
				}
			})
			laydate.render({ //结束时间
				elem : '#endtime',
				theme : '#1e9fff',
				done : function(value, date, endDate) {
					var startDate = new Date($('#starttime').val()).getTime();
					var endTime = new Date(value).getTime();
					if (endTime < startDate) {
						layer.msg('结束时间不能小于开始时间');
						$('#endtime').val($('#starttime').val());
					}
				}
			})
		});
	</script>
</body>
</html>
